<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.ajax的创建</title>
</head>

<body>
    <button id="btnNode">发送ajax</button>
    <div id="textNode"></div>
    <h1>原来的数据</h1>

    <script>
        /*
        readyState:
           0: 未发送请求，创建了XMLHttpRequest对象
           1: 客户端和服务器建立了连接 调用了open 和 send 方法

           2: 服务器接收到了请求，但是还没有处理数据
           3: 服务器端正在处理请求的数据
           4: 处理完成 向客户端发送了响应
        响应码：
          200： ok 成功
          301/302 重定向
          403 未授权
          404 请求路径不存在
          500 服务器异常
           
        
        */
        btnNode.onclick = function () {

            getNews()
            getData()


        }

        /**
         * 获取新闻数据
         */
        function getNews() {
            // console.log("获取新闻数据成功");

            // 1 创建ajax 的对象
            var xhr = new XMLHttpRequest()

            // 2 发送ajax 请求
            // 2.1 准备发送
            // get 请求发送参数直接写在url上
            xhr.open("GET", "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1", true);

            // 2.2 直接发送  发送参数
            xhr.send()

            // 3 得到响应解析数据
            // 3.1 进行监听操作 操作ajax的变化
            xhr.onreadystatechange = function (e) {

                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 获取响应数据
                    var value = xhr.responseText
                    // 将字符串转为json
                    console.log(JSON.parse(value));
                    // textNode.innerText=value;
                }


            }

        }

        /**
         * 获取本地数据
         */
        function getData() {
            // console.log("获取本地数据成功");
            // 1 创建ajax 的对象
            var xhr = new XMLHttpRequest()

            // 2 发送ajax 请求
            // 2.1 准备发送
            // get 请求发送参数直接写在url上
            xhr.open("GET", "./server/a.txt", true);

            // 2.2 直接发送  发送参数
            xhr.send()

            // 3 得到响应解析数据
            // 3.1 进行监听操作 操作ajax的变化
            xhr.onreadystatechange = function (e) {

                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 获取响应数据
                    var value = xhr.responseText
                    console.log(value);
                    // textNode.innerText=value;
                }


            }

        }
    </script>

</body>

</html>